<script setup>
import { ref } from 'vue'
import { lightenHex } from '@/utils/color'
const props = defineProps({
  content: String,
  bgc: String,
  disabled:Boolean
})
const btn = ref(null)
const handleChangeColor = () => {
  // 将颜色进行处理
  let lightenColor = lightenHex(props.bgc, 15)
  btn.value.style.backgroundColor = lightenColor
}
const handleEndChangeColor = () => {
  btn.value.style.backgroundColor = props.bgc
}
</script>

<template>
  <div
    class="item"
    :style="{ backgroundColor: props.bgc }"
    @mouseenter="handleChangeColor"
    @mouseleave="handleEndChangeColor"
    ref="btn"
    :class="{disabled:props.disabled}"
  >
    <slot name="icon"></slot>
    <span>{{ props.content }}</span>
  </div>
</template>

<style lang="less" scoped>
@theme-color: #00a98f;
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  color: white;
  gap: 2px;
  // width: 35px;
  // height: 35px;
  background-color: @theme-color;
  border-radius: 20px;
  padding: 10px;
  &:hover {
    // background-color: lighten(@theme-color, 10%);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255,255,255, 0.5);
  }
}
.disabled {
  cursor: not-allowed;
  background-color: rgba(0,0,0, 0.5);
}
</style>
